<template>
    <section class="houseDetails-public-header-content PriceSituation-box">
        <header>
            <img src="../../../../static/img/title-bg-img-left.jpg" alt="">
            <span>关于房价</span>
            <img src="../../../../static/img/title-bg-img-right.jpg" alt="">
        </header>
        <div class="content clearfix">
            <el-row>
                <div class="intuitive-data-title">
                    <header><i class="el-icon-location-outline"></i> 此区域关于房价的直观数据</header>
                    <div class="content clearfix">
                        <el-row>
                            <el-col :span="24">
                                <Zip_Zhvi_Summary_AllHomes></Zip_Zhvi_Summary_AllHomes>
                            </el-col>
                        </el-row>
                    </div>
                </div>

                <el-col :span="24">
                    <Zip_PriceToRentRatio_AllHomes></Zip_PriceToRentRatio_AllHomes>
                </el-col>
                <el-col :span="24">
                    <SaleToListRatio_City></SaleToListRatio_City>
                </el-col>
                <el-col :span="24">
                    <DaysOnZillow_City></DaysOnZillow_City>
                </el-col>
                <el-col :span="24">
                    <Zip_MedianListingPrice_BottomTier></Zip_MedianListingPrice_BottomTier>
                </el-col>
                <el-col :span="24">
                    <Zip_MedianListingPrice_TopTier></Zip_MedianListingPrice_TopTier>
                </el-col>
                <el-col :span="24">
                    <Sale_Counts_Zip></Sale_Counts_Zip>
                </el-col>
                <el-col :span="24">
                    <Sale_Counts_Seas_Adj_City></Sale_Counts_Seas_Adj_City>
                </el-col>
                <el-col :span="24">
                    <Sale_Prices_Zip></Sale_Prices_Zip>
                </el-col>
                <el-col :span="24">
                    <Zip_MedianValuePerSqft_AllHomes></Zip_MedianValuePerSqft_AllHomes>
                </el-col>

                <el-col :span="24">
                    <Zip_Zhvi_1bedroom></Zip_Zhvi_1bedroom>
                </el-col>
                <el-col :span="24">
                    <Zip_Zhvi_2bedroom></Zip_Zhvi_2bedroom>
                </el-col>
                <el-col :span="24">
                    <Zip_Zhvi_3bedroom></Zip_Zhvi_3bedroom>
                </el-col>
                <el-col :span="24">
                    <Zip_Zhvi_4bedroom></Zip_Zhvi_4bedroom>
                </el-col>
                <el-col :span="24">
                    <Zip_Zhvi_5BedroomOrMore></Zip_Zhvi_5BedroomOrMore>
                </el-col>
                <el-col :span="24">
                    <Zip_Zhvi_AllHomes></Zip_Zhvi_AllHomes>
                </el-col>
                <el-col :span="24">
                    <Zip_Zhvi_Condominum></Zip_Zhvi_Condominum>
                </el-col>
                <el-col :span="24">
                    <Zip_Zhvi_SingleFamilyResidence></Zip_Zhvi_SingleFamilyResidence>
                </el-col>
                <el-col :span="24">
                    <Zip_Zhvi_BottomTier_yoy></Zip_Zhvi_BottomTier_yoy>
                </el-col>
                <el-col :span="24">
                    <Zip_Zhvi_BottomTier></Zip_Zhvi_BottomTier>
                </el-col>
                <el-col :span="24">
                    <Zip_Zhvi_MiddleTier_yoy></Zip_Zhvi_MiddleTier_yoy>
                </el-col>
                <el-col :span="24">
                    <Zip_Zhvi_MiddleTier></Zip_Zhvi_MiddleTier>
                </el-col>
                <el-col :span="24">
                    <Zip_Zhvi_TopTier_yoy></Zip_Zhvi_TopTier_yoy>
                </el-col>
                <el-col :span="24">
                    <Zip_Zhvi_TopTier></Zip_Zhvi_TopTier>
                </el-col>

                <el-col :span="24">
                    <Zip_MedianListingPricePerSqft_1Bedroom></Zip_MedianListingPricePerSqft_1Bedroom>
                </el-col>
                <el-col :span="24">
                    <Zip_MedianListingPricePerSqft_2Bedroom></Zip_MedianListingPricePerSqft_2Bedroom>
                </el-col>
                <el-col :span="24">
                    <Zip_MedianListingPricePerSqft_3Bedroom></Zip_MedianListingPricePerSqft_3Bedroom>
                </el-col>
                <el-col :span="24">
                    <Zip_MedianListingPricePerSqft_4Bedroom></Zip_MedianListingPricePerSqft_4Bedroom>
                </el-col>
                <el-col :span="24">
                    <Zip_MedianListingPricePerSqft_5BedroomOrMore></Zip_MedianListingPricePerSqft_5BedroomOrMore>
                </el-col>
                <el-col :span="24">
                    <Zip_MedianListingPricePerSqft_AllHomes></Zip_MedianListingPricePerSqft_AllHomes>
                </el-col>
                <el-col :span="24">
                    <Zip_MedianListingPricePerSqft_CondoCoop></Zip_MedianListingPricePerSqft_CondoCoop>
                </el-col>
                <el-col :span="24">
                    <Zip_MedianListingPricePerSqft_DuplexTriplex></Zip_MedianListingPricePerSqft_DuplexTriplex>
                </el-col>
                <el-col :span="24">
                    <Zip_MedianListingPricePerSqft_Sfr></Zip_MedianListingPricePerSqft_Sfr>
                </el-col>


            </el-row>
        </div>
    </section>
</template>

<script>
    import Zip_Zhvi_Summary_AllHomes from './Zip_Zhvi_Summary_AllHomes.vue';//房价概况——房价环比同比及预测——文字说明

    import Zip_PriceToRentRatio_AllHomes from './Zip_PriceToRentRatio_AllHomes.vue';//房租概况——所有房产售租比——时间轴折线图
    import SaleToListRatio_City from './SaleToListRatio_City.vue';//房价概况——当月成交与挂牌房源比例——%大数据量面积折线图
    import DaysOnZillow_City from './DaysOnZillow_City.vue';//房价概况——中位挂牌时间——柱状图
    import Zip_MedianListingPrice_BottomTier from './Zip_MedianListingPrice_BottomTier.vue';//房价概况——低端房产中位挂牌价格——时间轴折线图
    import Zip_MedianListingPrice_TopTier from './Zip_MedianListingPrice_TopTier.vue';//房价概况——高端房产中位挂牌价格——时间轴折线图
    import Sale_Counts_Zip from './Sale_Counts_Zip.vue';//房价概况——房产销售数量（本邮编）——柱状图
    import Sale_Counts_Seas_Adj_City from './Sale_Counts_Seas_Adj_City.vue';//房价概况——房产销售数量（本城市）——柱状图
    import Sale_Prices_Zip from './Sale_Prices_Zip.vue';//房价概况——所有房产平均成交价格——时间轴折线图
    import Zip_MedianValuePerSqft_AllHomes from './Zip_MedianValuePerSqft_AllHomes.vue';//房价概况——所有房产中位单价（平方英尺）——时间轴折线图

    import Zip_Zhvi_1bedroom from './Zip_Zhvi_1bedroom.vue';//房价概况——一居室户型中位房价——时间轴折线图
    import Zip_Zhvi_2bedroom from './Zip_Zhvi_2bedroom.vue';//房价概况——二居室户型中位房价——时间轴折线图
    import Zip_Zhvi_3bedroom from './Zip_Zhvi_3bedroom.vue';//房价概况——三居室户型中位房价——时间轴折线图
    import Zip_Zhvi_4bedroom from './Zip_Zhvi_4bedroom.vue';//房价概况——四居室户型中位房价——时间轴折线图
    import Zip_Zhvi_5BedroomOrMore from './Zip_Zhvi_5BedroomOrMore.vue';//房价概况——五居室及以上户型中位房价——时间轴折线图
    import Zip_Zhvi_AllHomes from './Zip_Zhvi_AllHomes.vue';//房价概况——所有户型均价包括独栋别墅、联排及公寓——时间轴折线图
    import Zip_Zhvi_Condominum from './Zip_Zhvi_Condominum.vue';//房价概况——公寓及联排均价——时间轴折线图
    import Zip_Zhvi_SingleFamilyResidence from './Zip_Zhvi_SingleFamilyResidence.vue';//房价概况——独栋别墅均价——时间轴折线图
    import Zip_Zhvi_BottomTier_yoy from './Zip_Zhvi_BottomTier_yoy.vue';//房价概况——低价位房产——%大数据量面积折线图
    import Zip_Zhvi_BottomTier from './Zip_Zhvi_BottomTier.vue';//房价概况——低价位房产中位房价——时间轴折线图
    import Zip_Zhvi_MiddleTier_yoy from './Zip_Zhvi_MiddleTier_yoy.vue';//房价概况——中价位房产——%大数据量面积折线图
    import Zip_Zhvi_MiddleTier from './Zip_Zhvi_MiddleTier.vue';//房价概况——中价位房产中位房价——时间轴折线图
    import Zip_Zhvi_TopTier_yoy from './Zip_Zhvi_TopTier_yoy.vue';//房价概况——高价位房产——%大数据量面积折线图
    import Zip_Zhvi_TopTier from './Zip_Zhvi_TopTier.vue';//房价概况——高价位房产中位房价——时间轴折线图


    import Zip_MedianListingPricePerSqft_1Bedroom from './Zip_MedianListingPricePerSqft_1Bedroom.vue';//房价概况——一居室房产标价每平方英尺中位价格——时间轴折线图
    import Zip_MedianListingPricePerSqft_2Bedroom from './Zip_MedianListingPricePerSqft_2Bedroom.vue';//房价概况——二居室房产标价每平方英尺中位价格——时间轴折线图
    import Zip_MedianListingPricePerSqft_3Bedroom from './Zip_MedianListingPricePerSqft_3Bedroom.vue';//房价概况——三居室房产标价每平方英尺中位价格——时间轴折线图
    import Zip_MedianListingPricePerSqft_4Bedroom from './Zip_MedianListingPricePerSqft_4Bedroom.vue';//房价概况——四居室房产标价每平方英尺中位价格——时间轴折线图
    import Zip_MedianListingPricePerSqft_5BedroomOrMore from './Zip_MedianListingPricePerSqft_5BedroomOrMore.vue';//房价概况——五居室及以上房产标价每平方英尺中位价格——时间轴折线图
    import Zip_MedianListingPricePerSqft_AllHomes from './Zip_MedianListingPricePerSqft_AllHomes.vue';//房价概况——所有户型标价每平方英尺中位价格——时间轴折线图
    import Zip_MedianListingPricePerSqft_CondoCoop from './Zip_MedianListingPricePerSqft_CondoCoop.vue';//房价概况——公寓及联排房产标价每平方英尺中位价格——时间轴折线图
    import Zip_MedianListingPricePerSqft_DuplexTriplex from './Zip_MedianListingPricePerSqft_DuplexTriplex.vue';//房价概况——双拼及三拼房产标价每平方英尺中位价格——时间轴折线图
    import Zip_MedianListingPricePerSqft_Sfr from './Zip_MedianListingPricePerSqft_Sfr.vue';//房价概况——独栋房产标价每平方英尺中位价格——时间轴折线图

    export default {
        data() {
            return {
                houseId: this.$route.query.houseId || null, //房源zip
                zip: this.$route.query.zip || null, //房源zip
            }
        },
        created() {
        },
        mounted() {
            this.$store.commit('set_houseDetailsZipcode', this.zip);
            //获取房源基本信息数据
            this.getHouseBasicInfo();
        },
        computed: {},
        methods: {
            //获取房源基本信息数据
            getHouseBasicInfo(){
                this.$get(`/house/${this.houseId}/basicInfo`).then(res => {
                    if (res.status == 0) {
                        // 房源详情页zil图表判断房源户型和几居室使用——房源基本信息
                        this.$store.commit('set_houseDetailsBasicInfo', res.data);
                    }else{
                        console.log(res.msg);
                    }
                });
            },
        },
        components: {
            Zip_Zhvi_Summary_AllHomes,//房价概况——房价环比同比及预测——文字说明

            Zip_PriceToRentRatio_AllHomes,//房租概况——所有房产售租比——时间轴折线图
            SaleToListRatio_City,//房价概况——当月成交与挂牌房源比例——%大数据量面积折线图
            DaysOnZillow_City,//房价概况——中位挂牌时间——柱状图
            Zip_MedianListingPrice_BottomTier,//房价概况——低端房产中位挂牌价格——时间轴折线图
            Zip_MedianListingPrice_TopTier,//房价概况——高端房产中位挂牌价格——时间轴折线图
            Sale_Counts_Zip,//房价概况——房产销售三居室户型中位房价数量（本邮编）——柱状图
            Sale_Counts_Seas_Adj_City,//房价概况——房产销售数量（本城市）——柱状图
            Sale_Prices_Zip,//房价概况——所有房产平均成交价格——时间轴折线图
            Zip_MedianValuePerSqft_AllHomes,//房价概况——所有房产中位单价（平方英尺）——时间轴折线图

            Zip_Zhvi_1bedroom,//房价概况——一居室户型中位房价——时间轴折线图
            Zip_Zhvi_2bedroom,//房价概况——二居室户型中位房价——时间轴折线图
            Zip_Zhvi_3bedroom,//房价概况——三居室户型中位房价——时间轴折线图
            Zip_Zhvi_4bedroom,//房价概况——四居室户型中位房价——时间轴折线图
            Zip_Zhvi_5BedroomOrMore,//房价概况——五室及以上户型中位房价——时间轴折线图
            Zip_Zhvi_AllHomes,//房价概况——所有户型均价包括独栋别墅、联排及公寓——时间轴折线图
            Zip_Zhvi_Condominum,//房价概况——公寓及联排均价——时间轴折线图
            Zip_Zhvi_SingleFamilyResidence,//房价概况——独栋别墅均价——时间轴折线图
            Zip_Zhvi_BottomTier_yoy,//房价概况——低价位房产——%大数据量面积折线图
            Zip_Zhvi_BottomTier,//房价概况——低价位房产中位房价——时间轴折线图
            Zip_Zhvi_MiddleTier_yoy,//房价概况——中价位房产——%大数据量面积折线图
            Zip_Zhvi_MiddleTier,//房价概况——中价位房产中位房价——时间轴折线图
            Zip_Zhvi_TopTier_yoy,//房价概况——高价位房产——%大数据量面积折线图
            Zip_Zhvi_TopTier,//房价概况——高价位房产中位房价——时间轴折线图

            Zip_MedianListingPricePerSqft_1Bedroom,//房价概况——一居室房产标价每平方英尺中位价格——时间轴折线图
            Zip_MedianListingPricePerSqft_2Bedroom,//房价概况——二居室房产标价每平方英尺中位价格——时间轴折线图
            Zip_MedianListingPricePerSqft_3Bedroom,//房价概况——三居室房产标价每平方英尺中位价格——时间轴折线图
            Zip_MedianListingPricePerSqft_4Bedroom,//房价概况——四居室房产标价每平方英尺中位价格——时间轴折线图
            Zip_MedianListingPricePerSqft_5BedroomOrMore,//房价概况——五居室及以上房产标价每平方英尺中位价格——时间轴折线图
            Zip_MedianListingPricePerSqft_AllHomes,//房价概况——所有户型标价每平方英尺中位价格——时间轴折线图
            Zip_MedianListingPricePerSqft_CondoCoop,//房价概况——公寓及联排房产标价每平方英尺中位价格——时间轴折线图
            Zip_MedianListingPricePerSqft_DuplexTriplex,//房价概况——双拼及三拼房产标价每平方英尺中位价格——时间轴折线图
            Zip_MedianListingPricePerSqft_Sfr,//房价概况——独栋房产标价每平方英尺中位价格——时间轴折线图


        }
    }
</script>

<style lang="less" type="text/less">
    .PriceSituation-box {
        border-radius: 5px;
        overflow: hidden;
        position: relative;
        > header {
            display: flex;
            display: -webkit-flex;
            align-items: center;
            justify-content: center;
            > span {
                padding: 0 5px;
                font-size: 30px;
                color: #00bc84;
            }
            >img{
                display: inline-block;
                max-width: 100px;
            }
        }
        .intuitive-data-title{
            > header {
                padding: 13px 20px;
                background: #edf7ff;
                font-size: 18px;
                color: #242424;
                border-bottom: 1px solid #dee2e5;
                > i {
                    font-size: 20px;
                    color: #ff7500;
                }
            }
            >.content{
                width: 100%;
                position: relative;
                background: #fff;
                padding: 15px;
            }
        }
        >.content {
            padding: 15px;
            width: 100%;
            overflow: hidden;
            >.el-row {
                .el-col:first-of-type{
                    .echart-chart {
                        margin: 0;
                    }
                }
                .el-col {
                    padding: 0;
                    .echart-chart {
                        margin: 30px 0 0 0;
                        > .inside {
                            border: 1px solid #dee2e5;
                            padding: 0;
                            > header {
                                padding: 13px 20px;
                                background: #edf7ff;
                                font-size: 18px;
                                color: #242424;
                                border-bottom: 1px solid #dee2e5;
                                > i {
                                    font-size: 20px;
                                    color: #ff7500;
                                }
                            }
                            > .chartBox {
                                width: 100%;
                                text-align: center;
                                position: relative;
                                background: #fff;
                                >article {
                                    > .el-radio-group {
                                        padding: 15px 0;
                                        > .el-radio + .el-radio {
                                            margin-left: 15px;
                                        }
                                    }

                                    > .regionType-button {
                                        > div {
                                            padding: 10px;
                                            float: right;
                                        }
                                    }

                                    > .chart-div {
                                        width: 100%;
                                        height: 250px;
                                    }

                                    > p {
                                        color: #ff7b2c;
                                        text-align: left;
                                        margin: 5px 0;
                                        padding: 0 10px;
                                    }
                                }
                                > h4 {
                                    min-height: 100px;
                                    display: flex;
                                    justify-content: center;
                                    align-items: center;
                                    font-size: 20px;
                                    color: #000;
                                    text-align: center;
                                }
                                aside {
                                    text-align: left;
                                    padding: 20px;
                                    > p {
                                        line-height: 30px;
                                        color: #000;
                                        > span {
                                            color: #858585;
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }
</style>

